<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="shortcut icon" href="scis.png" />
    <title>SCIS Mailman | HOME</title>
    
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    
    <link rel="stylesheet" href="package/tuktuk.css">
    <link rel="stylesheet" href="package/tuktuk.theme.css">
    <link rel="stylesheet" href="package/tuktuk.icons.css">
     
    <style>
      body > header .logo {
        margin-top: 11px;
        max-height: 28px; 
      }
      
      body > header .tapquo > img {
        max-height: 48px; 
      }
      
      body > footer img {
        height: 18px;
        position: relative;
        top: 5px;
        left: 2px; 
      }

      body .devices span {
        font-size: 128px;
      }

      body .icons .icon {
        font-size: 32px;
        width: 44px;
        display: inline-block;
        margin: 5px;
        text-align: center;
      }      
    </style>
  </head>

  <body>
    <section class="bck darkest landing text center color white">
      <div class="row">
        <div class="column_10 offset_1">
          <h1><strong><img src="med.png" alt="" class="small"> SCIS Mail</strong>man</h1>
          <h2 class="margin-bottom">A mailing list for all.</h2>
        </div>
      </div>
      
      <div class="row">
        <div class="row margin-top margin-bottom text center">
        <button class="offset_2 large column_4" data-tuktuk-modal="default_modal"><span class="icon user"></span>Login</button>
        <button class="large column_4 alert" data-tuktuk-modal="big_modal"><span class="icon pencil"></span>Subscribe</button>
        <br><br><br><br>
      </div>
      </div>
    </section>

    <!-- ========================== MODALS ========================== -->
    <div id="default_modal" data-tuktuk="modal"  class="column_5">
      <header>
        <h4 class="text thin">LOGIN</h4>
        <button data-modal="close" class="transparent small on-right inline icon remove"></button>        
      </header>
      
      <section class="padding">
        <div class="row">
          <div class="column_3 ">
            <form id="form" name="form" class="margin-top">
              <label>Email:</label>
              <input type="text" name="name" id="name" required />
              
              <label>Password:</label>
              <input type="password" name="password" id="password" required />
              <br><br>
              <a href=" " class="kc"><small>Forgot password?</small></a>
            </form>
          </div>
        </div>
      </section>
      
      <footer>
        <button data-modal="close" class="anchor"><span class="icon ok"></span>Login</button>
      </footer>
    </div>

    <div id="big_modal" data-tuktuk="modal" class="column_5">
      <header class="bck alert">
        <h4 class="text thin inline">SUBSCRIBE</h4>
        <button data-modal="close" class=" small on-right inline top icon remove"></button> 
        
      </header>
      <section class="padding">
        <div class="row">
          <div class="column_3 ">
            <form id="form" name="default" class="margin-top">
              <label>Email:</label>
              <input type="text" name="email" id="email" required />
                            
              <label>Password:</label>
              <input type="password" name="password" id="password" required />
              
              <label>Confirm Password:</label>
              <input type="password" name="conf" id="conf" required />
            </form>
          </div>
        </div>
      </section>
      
      <div>
        <button data-modal="close" class="button large alert margin-bottom margin-left"><span class="icon ok"></span>Subscribe</button>
        <button data-modal="close" class="button  secondary"><span class="icon remove"></span>Cancel</button>
      </div>
    </div>
    
    <!-- ========================== FOOTER ========================== -->
    <footer class="bck dark padding text center relative bottom">
        <div class="row margin-bottom margin-top " style="position: relative;">
            <p>&copy; 2013 Saint Louis University SCIS. All Rights Reserved.
        </div>
    </footer>

    <!-- TUKTUK.WIDGETS -->
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="package/tuktuk.js"></script>
  </body>
</html>
